﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>丝绸</title>
	<link rel="shortcut icon" href="images/Camel.ico" type="image/x-icon"/> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- 加载css -->
	<link rel="stylesheet" type="text/css" charset="utf-8" href="css/style.css"/>
	<link rel="stylesheet" type="text/css" charset="utf-8" href="css/jquery.fullPage.css">
	<link rel="stylesheet" type="text/css" charset="utf-8" href="css/fashionfoucs.css"/>
	
	<!-- 重写全屏导航样式 -->
	<style type="text/css">
	.fp-tooltip{
		color: #0084cf;
	}
	#fp-nav span, .fp-slidesNav span{
		border-color: #005e00;
	}
	#fp-nav li .active span, .fp-slidesNav .active span{
		background: #005e00;
	}
	</style>

	<!-- 导航焦点图 -->
	<style type="text/css">
        #featureTab{width: 100%;height:430px;overflow: hidden;position: relative; top:120px; margin: 0 auto; opacity: 1.0;}
        .screen .movie{height: 430px;width: 100%;display:inline-block;text-align: center;position: absolute;}
        .screen .movie.on{opacity : 0;filter:alpha(opacity=0);}
        .navigation{width:100%;height:160px;margin:0 auto;padding-top:30px;overflow: hidden;}
        .navigation dt{position: relative;left: 50%;margin-left: -208px;width: 1200px;height: 60px;}
        .navigation dt dl{margin-right:28px;float:left;cursor: pointer;width:60px;height:60px;text-align:center;position: relative;}
        .navigation .t1{background-image: url('images/featureTab1.png');background-repeat:no-repeat;top:35px;}
        .navigation .t2{background-image: url('images/featureTab2.png');background-repeat:no-repeat;top:35px;}
        .navigation .t3{background-image: url('images/featureTab5.png');background-repeat:no-repeat;top:35px;}
        .navigation .t4{background-image: url('images/featureTab3.png');background-repeat:no-repeat;top:35px;}
        .navigation .t5{background-image: url('images/featureTab4.png');background-repeat:no-repeat;top:35px;}
        .navigation .tm{<!-- background:url('images/tm.png') no-repeat; -->width:54px;height:55px;}
        .navigation .on .tm{opacity : 0;filter:alpha(opacity=0);}
        .none{display:none;}
        .button{cursor: pointer;background:#f8f8f8 url('images/featureDonwload.png') no-repeat;width:185px;height:60px;border:none;background-position: -2px 0px;position: absolute;top:380px;left:50%;margin-left:-92px;}
        .button:link{}
        .button:visited{}
        .button:hover,.button.on:hover{background-position: -2px -52px;}
        .button:active{background-position: -2px -104px;}
    </style>
	
	<!-- 加载js -->
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.9.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
	<script type="text/javascript" src="js/jquery.plugin.min.js"></script>
	<script type="text/javascript" src="js/jquery.tools.min.js"></script>

	<!-- 全屏翻页 -->
	<script type="text/javascript">
		$(document).ready(function() {
			$('#fullpage').fullpage({
				'verticalCentered': false,
				'css3': true,
				'navigation': true,
				'navigationPosition': 'right',
				'navigationTooltips': ['首页', '特点', '下载', '开发', '关于'],
				loopTop: true,
				loopBottom: true
			});
			show(0);
		});
	</script>
</head>

<body>
	<div class="topPanel">
		<div class="panel_center">
			<img src="images/menuLogoBack.png" alt="丝绸平台" />
			<br >
			<img src="images/menuLogoText.png" alt="丝绸平台" />
		</div>
	</div>

	<div class="bottomPanel">
		<div class="panel_center">
			<p class="tips">Copyright@2014 CamelStudio.cn All Rights Reserved</p>
		</div>
	</div>


	<!-- 全屏翻页 -->
	<div id="fullpage">
		<div class="section" id="section1">
			<div id="banner">
        <ul id="banner_img">
            <li class="item1">
                <div class="wrapper">
                    <div class="ad_txt">
                        <h2>娱乐聊天</h2>
                        <p>
                            丝绸 支持在线文本和表情图片聊天、语音和视频聊天、<br />
                            点对点断点续传文件、共享文件、网络硬盘、传送离线文件等多种功能 <br />
                        </p>
                    </div>
                    <div class="ad_img">
                        <img src="images/chat.png" alt="娱乐聊天" />
                    </div>
                </div>
            </li>
            <li class="item2">
                <div class="wrapper">
                    <div class="ad_txt">
                        <h2>办公交流</h2>
                        <p>
                           丝绸 可用于构建公司内部局域网沟通平台, <br />
                           支持屏幕共享、远程视频会议等多种功能
                        </p>
                    </div>
                    <div class="ad_img">
                        <img src="images/mainWork.png" alt="办公交流" />
                    </div>
                </div>
            </li>
            <li class="item3">
                <div class="wrapper">
                    <div class="ad_txt">
                        <h2>移动互通</h2>
                        <p>
                            丝绸 可运行在Windows、Linux、MacOSX、Android、IOS。<br />
                            五大主流电脑和移动操作系统中, 现实多平台互动操作。
                        </p>
                    </div>
                    <div class="ad_img">
                        <img src="images/mainMobile.png" alt="移动互通" />
                    </div>
                </div>
            </li>
            <li class="item4">
                <div class="wrapper">
                    <div class="ad_txt">
                        <h2>云端存储</h2>
                        <p>
                            丝绸 搭建有云平台存储系统、支持用户存储私人或分享数据。
                        </p>
                    </div>
                    <div class="ad_img">
                        <img src="images/mainServer.png" alt="云端存储" />
                    </div>
                </div>
            </li>
            <li class="item5">
                <div class="wrapper">
                    <div class="ad_txt">
                        <h2>神秘业务</h2>
                        <p>
                            神秘业务的介绍
                        </p>
                    </div>
                    <div class="ad_img">
                        <img src="images/mainBusiness.png" alt="神秘业务" />
                    </div>
                </div>
            </li>
            <li class="item6">
                <div class="wrapper">
                    <div class="ad_txt">
                        <h2>神秘业务</h2>
                        <p>
                            神秘业务的介绍
                        </p>
                    </div>
                    <div class="ad_img">
                        <img src="images/mainBusiness.png" alt="神秘业务" />
                    </div>
                </div>
            </li>
            <li class="item7">
                <div class="wrapper">
                    <div class="ad_txt">
                        <h2>神秘业务</h2>
                        <p>
                            神秘业务的介绍
                        </p>
                    </div>
                    <div class="ad_img">
                        <img src="images/mainBusiness.png" alt="神秘业务" />
                    </div>
                </div>
            </li>
            <li class="item8">
                <div class="wrapper">
                    <div class="ad_txt">
                        <h2>神秘业务</h2>
                        <p>
                            神秘业务的介绍
                        </p>
                    </div>
                    <div class="ad_img">
                        <img src="images/mainBusiness.png" alt="神秘业务" />
                    </div>
                </div>
            </li>
        </ul>
        <div id="banner_ctr">
            <div id="drag_ctr"></div>
            <ul>
                <li>娱乐聊天</li>
                <li>娱乐聊天</li>
                <li>办公交流</li>
                <li>移动互通</li>
                <li>云端存储</li>
                <li>神秘业务</li>
                <li>神秘业务</li>
                <li>神秘业务</li>
                <li>神秘业务</li>
                <li>神秘业务</li>
            </ul>
            <div id="drag_arrow"></div>
        </div>
		<script type="text/javascript" src="js/fashionfoucs.js"></script>
    </div>

		<div class="section" id="section2">
			<div id="featureTab">
				<div class="screen j-slider" flag="0" style="position: absolute;width: 100%;">
					<div class="movie"><img src="images/featureSafe.png" /></div>
					<div class="movie on" ><img src="images/featureP2P.png" /></div>
					<div class="movie on" index="2"><img src="images/featureSys.png" /></div>
					<div class="movie on" index="3"><img src="images/featureFast.png" /></div>
					<div class="movie on" index="4"><img src="images/featureUI.png" /></div>
					
				</div>
			</div>
					<div class="navigation">
						<dt>
							<dl class="t1" index="0"><div class="tm"></div></dl>
							<dl class="t2" index="1"><div class="tm"></div></dl>
							<dl class="t3" index="2"><div style="margin-left:1px;" class="tm"></div></dl>
							<dl class="t4" index="3"><div class="tm"></div></dl>
							<dl class="t5" index="4"><div class="tm"></div></dl>
						</dt>
					</div>
					<script type="text/javascript">
						(function () {
							var $width = $(document).width();
							var getIndex = 0;
							var interFlag = true;
							var movieInter = null;
							var focuMovie = $("#featureTab .movie");
							var btn = $(".navigation dt dl");
							$(".navigation dt dl .tm").eq(0).css("opacity", 0);
							focuMovie.each(function (i) {
								if (i !== 0) $(this).css("left", $width);
							})

							btn.mouseover(function () {
								if (interFlag) {
									clearInterval(movieInter);
									clearInterval(movieTime);
									interFlag = false;
								}

								var j = $(this).attr("index");
								var anim = -$width;
								var object = $(this);
								if (getIndex < j) anim = $width;
								if (getIndex == j) return;

								anmtion(getIndex, j, anim, object);
								getIndex = j;
							})
							var anmtion = function (i, j, anim, object) {
								btn.each(function (k) {
									var _this = $(this).find(".tm");
									_this.animate({ opacity: 1 }, { queue: false }, 200);
								})
								var _this_ = object.find(".tm");
								_this_.animate({ opacity: 0 }, { queue: false }, 200);
								var num = 40;
								focuMovie.eq(i).animate({
									opacity: "0"
								}, {
									duration: 800,
									queue: false,
									complete: function () {
										focuMovie.eq(i).css("left", anim);
									}
								});

								if (anim == $width) num = -40;
								focuMovie.eq(j).animate({
									left: num,
									opacity: "1"
								}, {
									duration: 800,
									queue: false,
									complete: function () {
										focuMovie.eq(j).animate({
											left: 0
										}, {
											queue: false,
											complete: function () {
												for (var t = 0; t < 5; t++) {
													if (t > j) focuMovie.eq(t).css("left", $width + 40);
													if (t < j) focuMovie.eq(t).css("left", -$width - 40);
												}
											}
										});
									}
								});
							};

							var movieTime = setTimeout(function () {
								var ii = getIndex + 1;
								var id = btn.eq(ii);
								anmtion(getIndex, ii, $width, id);
								getIndex = ii;
								movieInter = setInterval(function () {
									var jj = getIndex + 1;
									if (jj >= 4) clearInterval(movieInter);
									var object = btn.eq(jj);
									anmtion(getIndex, jj, $width, object);
									getIndex = jj;
								}, 5000);
							}, 3000);

							var request = function (names) {
								if (names) {
									var URLParams = "";
									var aParams = document.location.search.substr(1).split('&');
									for (i = 0; i < aParams.length ; i++) {
										var aParam = aParams[i].split('=');
										if (aParam[0] == names)
											URLParams = aParam[1];
									}
									return URLParams;
								}
							};

						})();
				</script>
		</div>
		<div class="section" id="section3">
			<div id="downScrollWrapper">
		<div id="downArrows">
			<a id="arrow-left" class="prev"></a>
			<a id="arrow-right" class="next"></a>
		</div>
		<div id="scrollBorder">
			<div id="downScroll">
				<div id="downBoards">
					<div class="board" id="downb1">
						<p>&nbsp;&nbsp;
                            丝绸客户端 v1.0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            丝绸数据库服务器 v1.0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            丝绸中心端服务器 v1.0<br>
                            (2014年5月6日发布)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            (2014年5月6日发布)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            (2014年5月6日发布)<br>&nbsp;&nbsp;
                            <a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 10px;"><span>立即下载</span></a>
                            <a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 90px;"><span>请联系作者</span></a>
                            <a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 90px;"><span>请联系作者</span></a>
                            <br>
                            <br>
                            <br>
                            丝绸平台Windows版本支持WindowsXP及以上版本。
						</p>
					</div>
					<div class="board" id="downb2">
						<p>&nbsp;&nbsp;
                            丝绸客户端 v1.0<br>
                            (2014年5月6日发布)<br>
                            <a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 10px;"><span>立即下载</span></a>
                            <br>
                            <br>
                            <br>
                            丝绸平台Android版本支持Android4.0及以上版本。
						</p>
					</div>
					<div class="board"  id="downb3">
						<p>&nbsp;&nbsp;
                            丝绸客户端 v1.0<br>
                            (2014年5月6日发布)<br>
                            <a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 10px;"><span>立即下载</span></a>
                            <br>
                            <br>
                            <br>
                            丝绸平台IOS版本支持IOS5.0.1及以上版本。
						</p>
					</div>
					<div class="board" id="downb4">
						<p>&nbsp;&nbsp;
                            丝绸客户端 v1.0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            丝绸数据库服务器 v1.0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            丝绸中心端服务器 v1.0<br>
                            (2014年5月6日发布)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            (2014年5月6日发布)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            (2014年5月6日发布)<br>&nbsp;&nbsp;
                            <a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 10px;"><span>立即下载</span></a>
                            <a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 90px;"><span>请联系作者</span></a>
                            <a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 90px;"><span>请联系作者</span></a>
                            <br>
                            <br>
                            <br>
                            丝绸平台Mac版本支持MacOSX10.9 Mavericks及以上版本。
						</p>
					</div>
					<div class="board" id="downb5">
						<p>&nbsp;&nbsp;
                            丝绸客户端 v1.0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            丝绸数据库服务器 v1.0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            丝绸中心端服务器 v1.0<br>
                            (2014年5月6日发布)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            (2014年5月6日发布)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            (2014年5月6日发布)<br>&nbsp;&nbsp;
                            <a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 10px;"><span>立即下载</span></a>
                            <a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 90px;"><span>请联系作者</span></a>
                            <a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 90px;"><span>请联系作者</span></a>
                            <br>
                            <br>
                            <br>
                            丝绸平台Ubuntu版本支持Ubuntu 12.04及以上版本。
						</p>
					</div>
			  </div>
			
			  <br clear="all" />
				<div id="thumbs" class="t">
					<div class="navi">
						<a id="t1" class="active">Windows版本</a>
						<a id="t2" class="">Android版本</a>
						<a id="t3" class="">IOS版本</a>
						<a id="t4" class="">MacOSX版本</a>
                        <a id="t5" class="">Ubuntu版本</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	    $("#downScroll").scrollable({
	        items: '#downBoards',
	        circular: true,
	        speed: 500
	    }).navigator().data("scrollable");
	</script>
		</div>
		<div class="section" id="section4">
			<div id="devScrollWrapper">
		<div id="devArrows">
			<a id="arrow-left" class="prev"></a>
			<a id="arrow-right" class="next"></a>
		</div>
            <div id="scrollBorder">
			<div id="devScroll">
				<div id="devBoards">
					<div class="board" id="devb1">
					<a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 420px;margin-top: 30px;"><span>立即下载</span></a>
						<p>
                            单峰驼 v1.0 (2014年5月6日发布)
							<br>
                            自主研发的分布式数据存储中间件, 非开源 属于CamelSoft系列基础开发组件. 可以方便快捷的搭建和部署基于分布式存储应用的云端系统, 轻松实现跨区域分布式存储系统. 由C++语言编写, 属于非关系数据库<br>
							<br>
                            特点：<br>
							* 高并发性，高灵活性，高拓展性<br>
							* 支持分布式部署<br>
							* 支持查询<br>
							* 支持序列化<br>
							* 支持网络访问<br>
							* 使用高效的二进制数据存储，包括大型对象（如视频等）<br>
							* 存放文件可自由选择压缩<br>
							* 自动处理碎片，以支持云计算层次的扩展性<br>
							* 加密, 优化的256位AES算法加密<br>
							* 压缩, 优化的zlib算法压缩<br>
							
						</p>
					</div>
					<div class="board" id="devb2">
					<a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 420px;margin-top: 30px;"><span>立即下载</span></a>
						<p>
                            双峰驼 v1.0 (2014年5月6日发布)
							<br>
                            自主研发的点对点可靠网络传输中间件, 非开源 属于CamelSoft系列基础开发组件. UDP和TCP协议下的可靠数据通讯组件，可用于建立P2P环境，文件传输，数据通讯。基于UDP/TCP协议的内网穿透解决方案, 轻松实现音视频会议中心, 直播, 远程桌面/文档演示等功能<br>
							<br>
                            特点：<br>
							* 轻量级通讯组件，数据通讯实现简单，快速，高效。<br>
							* 高层协议实现数据通讯的稳定可靠，可动态修改参数调整通讯策略。<br>
							* 可使用同一套接字初始化多个组件进行多线程数据通讯。<br>
							* 采用自行研发的并行滑动窗口协议，保证数据的稳定可靠传输。<br>
							* 数据通讯可行效率动态评估和计算获得当前环境下的最佳通讯表现。<br>
							* 通讯数据包发送分包，接收组包，保证数据顺序完整。<br>
							
						</p>
					</div>
					<div class="board"  id="devb3">
					 <a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 420px;margin-top: 30px;"><span>立即下载</span></a>
						<p>
                            异常检测组件 v1.0 (2014年5月6日发布)<br>
							<br>
                            程序异常崩溃时生成Dump文件和日志, 非开源 属于CamelSoft系列基础开发组件.<br>
							Dump文件是进程的内存镜像。可以把程序的执行状态通过调试器保存到dump文件中。<br>
							<br>
							特点：<br>
                            在应用程序中加入__try __except机制，在调试或发行版本中均可截获程序异常并写成minidump文件进行调试和分析。<br>
                            仅需做很小的修改就可以让其发挥作用。
						</p>
					</div>
					<div class="board"  id="devb4">
					<a class="GlobalButton" href="#" target="_parent" style="position: relative;margin-left: 420px;margin-top: 30px;"><span>立即下载</span></a>
						<p>
                            单峰驼可视化IDE v1.0 (2014年5月6日发布)<br>
                            <br>
                            <br>
                            <br>
                            单峰驼的图形操作界面。
						</p>
					</div>
			  </div>
			
			  <br clear="all" />
				<div id="thumbs" class="t">
					<div class="navi">
						<a id="t1" class="active">单峰驼</a>
						<a id="t2" class="">双峰驼</a>
						<a id="t3" class="">异常检测</a>
						<a id="t4" class="">可视化IDE</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	    $("#devScroll").scrollable({
	        items: '#devBoards',
	        circular: true,
	        speed: 500
	    }).navigator().data("scrollable");
	</script>
	</div>
	
	<div class="section" id="section5">
		<div class="about">
			<p class="author">作者: 郑天佐</p>
			<p class="im">QQ: 278969898</p>
			<p class="email">Email: CamelSoft@163.com</p>
		</div>
	</div>
		
</body>
</html>
